<script setup>

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs';
import {showFailToast, showSuccessToast, Toast} from "vant";


const route = useRoute();
const {tag} = route.query;
const userList = ref([])

onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tag
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        showSuccessToast('请求成功');
        return response?.data;
      })
      .catch(function (error) {
        console.error('/user/search/tags error', error);
        showFailToast('请求失败');
      })
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
  }
  userList.value = userListData;
})


// const mockUser = {
//   id: 1234,
//   username: '烟安安',
//   userAccount: '12345',
//   profile: '我是一个成许愿阿萨大大实打实的 实打实大苏打阿斯顿阿斯顿阿萨大大',
//   avatarUrl: '',
//   gender: 0,
//   phone: '15822222222',
//   email: '1035915972@qq.com',
//   userRole: 0,
//   planetCode: '1234',
//   tags: ['java', 'emo', '打工人', 'emo', '打工人'],
//   createTime: new Date(),
// }
</script>

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px;">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
  <van-empty v-if="!userList || userList.length<1" description="搜索结果为空"/>

</template>

<style scoped>

</style>